<template>
    <div>
        <div style="width:100%;height:200px;background-color: #FF2E67;">
            <div style="padding:10px 15px; position: relative">
                <img @click="returnHome" src="../assets/img/common-icon-ArrowLeftWhite.svg" style="width: 10px;" alt="">
                <img src="../assets/img/seckill-img.png" style="width:96px;position: absolute;left:50%;margin-left:-48px;top:6px;" alt="">
            </div>
            <div style="padding:10px 5px;margin-top: 5px;">
                <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;">
                  <li class="timeSty timeActiveSty">
                      <div style="font-weight: bold;">12:00</div>
                      <div style="margin-top:4px;font-size: 12px;">即将开抢</div>
                  </li>

                </ul>
            </div>
        </div>
        <div style="padding:10px;margin-top:-70px;">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                <ul>
                    <li v-for="item in list" :key="item" :title="item">
                        <div class="borderSty">
                            <div>
                                <img style="width:110px;height:110px;" src="../assets/img/tao2.png" alt="">
                            </div>
                            <div style="margin-left: 10px;">
                                <div style="width:190px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">
                                    儿童帆布鞋童鞋男童鞋子春秋板鞋女童2020年新款群秋款秋季韩版
                                </div>
                                <div style="margin-top:8px;">
                                    <span style="background-color: #FFF2AA;border-radius: 3px;font-size: 10px;padding:2px 7px;color:#974201;">约返1.08</span>
                                </div>
                                <div style="margin-top: 5px;">
                                    <span style="font-size: 18px;color:#FF2E67;">￥110</span>
                                    <span style="border:1px solid #FF2E67;border-radius: 3px;font-size: 10px;padding:2px 5px;color:#FF2E67;">券后</span>
                                    <span style="text-decoration: line-through;color:#bbb;">￥21.50</span>
                                    <span style="float: right;color:#888;">仅剩 64</span>
                                </div>
                                <div style="display:flex;margin-top:5px;justify-content: space-between;position: relative;">
                                    <van-progress style="margin-top:4px;display: inline-block;width:90px;border-radius: 8px;" :pivot-text="progressVal" :percentage="progressNum" stroke-width="22" color="#FF2E67" track-color="rgba(255,46,103,.4)" />
                                    <span style="position: absolute;color: #fff;padding: 6px;font-size: 10px;">已售32</span>
                                    <button class="btn_1">
                                        马上抢
                                    </button>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>
</template>

<script>
    import { List,Progress } from 'vant';
    export default {
        name: 'seckillPage',
        data () {
            return {
                list: [],
                loading: false,
                finished: false,
                progressNum:30,
                progressVal:""
            }
        },
        components: {
            [List.name]:List,
            [Progress.name]:Progress,
        },
        methods: {
            returnHome(){
                this.$router.go(-1);
            },
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                    }

                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                    this.finished = true;
                    }
                }, 1000);
            },
        },
    }
</script>
<style scoped>
    .elementSty::-webkit-scrollbar {display:none}
    .timeSty{
        display: inline-block;
        width:80px;
        color:#fff;
        padding:10px;
        font-size: 16px;
        text-align: center;
    }
    .timeActiveSty{
        color:#333;
        font-size: 18px;
        background-color: #FFE343;
        border-radius: 9px;
    }
     .borderSty{
        width: 100%;
        background-color: #fff;
        border-radius: 9px;
        border-radius: 6px;
        padding:15px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .rectangleSty{
        background: #FF2E67;
        line-height: 20px;
        padding: 2px 4px;
        color: #fff;
        font-size: 10px;
        text-align: center;
        width: 10px;
        position: relative;
      }
      .rectangleSty::after{
        content: ' ';
        position: absolute;
        top: 0;
        right: -8px;
        border-width: 18px 8px 0px 0px;
        border-style: solid;
        border-color: #FF2E67 transparent transparent transparent;
      }
      .afterSty{
        background: rgba(255, 46, 103, 0.2);
        line-height: 20px;
        padding: 2px 4px;
        padding-left:9px;
        color: #FF2E67;
        font-size: 10px;
        text-align: center;
        width: 10px;
        position: relative;
        left:-4px;
      }
      .btn_1{
          border:none;
          font-size: 12px;
          border-radius: 13px;
          padding:5px 20px;
          background: #FF2E67;
          color:#fff;
          line-height: 21px;
      }
</style>
